<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>{{ page.title }}</title>
  {% include head.html %}
</head>

<body class="root">
  <nav id="toolbar">
    <a href="{{ site.baseurl }}" id="arrow-back">
      <i class="material-icons">close</i>
      <img src="https://blocklycodelabs.dev/images/logo_knockout.png" class="logo-devs"
        alt="Blockly logo" />
    </a>

    <div class="title-grow">
      <div class="title">{{ page.title }}</div>
      <div class="subtitle">{{ page.description }}</div>
    </div>

    <a href="{{ 'https://github.com/google/blockly-samples/blob/master'
      | append: page.dir }}" class="button" target="_blank">View code</a>

    {% if page.packageName %}
    <!-- NPM LINK -->
    <a href="{{ 'https://www.npmjs.com/package/' | append: page.packageName }}" class="button" target="_blank">View on npm</a>
    {% endif %}
  </nav>
  <main id="main" {% if page.pages.size > 1 %} class="has-tabs" {% endif %}>

    {% if page.pages.size > 1 %}
      <!-- PAGE TABS -->
      <ul id="tabs">
        {% for file in page.pages %}
          <li>
            <a href="{{ site.baseurl }}/{{ page.pageRoot }}/{{ file.link }}">
              {{ file.label }}
            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}

    {% if page.article %}<article class="article-container site-width"><div class="article">{% endif %}

    {% if page.banner %}
      <!-- BANNER -->
      <header class="banner">
        <div class="site-width">
          <p>
            {{ page.banner }}
          </p>
        </div>
      </header>
    {% endif %}

    {% include content.html %}

    {% if page.article %}</div></article>{% endif %}
  </main>
  {% include footer.html %}
</body>

</html>